<template>
  <div class="site-manage">
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item style="width: 160px">
        <el-input v-model="queryForm.blurry" placeholder="请输入用户名或昵称"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"  color="#3aecff" @click="getDatas">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"  color="#3aecff" @click="onAddStation">添加</el-button>
      </el-form-item>
    </el-form>
    <DataTable
      class="no-search-table-container"
      :hasIndex="true"
      :tableHead="tableHead"
      :tableData="tableData"
      :isHasPagination="true"
      :border="true"
      :total="total"
      page-size="queryForm.size"
      :currentPage="queryForm.page"
      @changeCurrentPage="handleCurrentChange">
      <!--      <el-table-column-->
      <!--        prop="online"-->
      <!--        label="邮箱推送"-->
      <!--        width="100"-->
      <!--        align="center"-->
      <!--      >-->
      <!--        <template #default="scope">-->
      <!--          <el-switch v-model="scope.row.emailEnabled"-->
      <!--                     :loading="scope.row.emailLoading"-->
      <!--                     :before-change="beforeChange(scope.row,'email')"/>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column-->
      <!--        prop="online"-->
      <!--        label="手机推送"-->
      <!--        width="100"-->
      <!--        align="center"-->
      <!--      >-->
      <!--        <template #default="scope">-->
      <!--          <el-switch v-model="scope.row.mobileEnabled"-->
      <!--                     :loading="scope.row.mobileLoading"-->
      <!--                     :before-change="beforeChange(scope.row,'mobile')"/>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column
        prop="online"
        label="是否启用"
        width="90"
        align="center"
      >
        <template #default="scope">
          <el-tag
            :type="scope.row.enabled ? 'success' : 'info'"
            disable-transitions
          >{{ scope.row.enabled ? '启用' : '停用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        prop="roleName"
        width="150">
        <template #default="scope">
          <el-button
            size="small" type="success"
            @click="edit(scope.$index, scope.row)">编辑
          </el-button>
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon-color="#626AEF"
            title="确定要删除这个用户吗?"
            @confirm="remove(scope.$index, scope.row)"
          >
            <template #reference>
              <el-button size="small" type="danger">删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </DataTable>
    <el-drawer
      v-model="showAddDialog"
      :title="dialogTitle"
      :append-to-body="true"
      :direction="'ltr'"
      size="30%"
    >
      <UserAddDialog :data="currentUser" v-if="showAddDialog" @refresh="getDatas"></UserAddDialog>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
  import {onMounted, Ref, ref} from "vue";
  import {removeUser} from "@/api/user";

  import {UnwrapRef} from "@vue/reactivity";
  import {getUserInfoPage} from "@/api/user";
  import UserAddDialog from "@/views/side/comps/UserAddDialog.vue";
  import ElMessage from "element-plus";
  import {getNameByCode} from '@/assets/datas/code'

  const queryForm: Ref<UnwrapRef<any>> = ref({
    blurry: '',
    page: 0,
    size: 15
  })
  const showAddDialog = ref(false)
  const current = ref(0)
  const total = ref(100)
  const dialogTitle = ref("")
  const currentUser = ref({})

  const tableHead = [
    {
      prop: 'username',
      label: '用户名',
    },
    {
      prop: 'nickName',
      label: '姓名',
    }, {
      prop: 'phone',
      label: '手机',
      width: '120px'
    }, 
    {
      prop: 'regionCode',
      label: '行政编码',
      width: '120px',
      formatter:(row)=>{
        return getNameByCode(row.regionCode)
      }
    },
    {
      prop: 'email',
      label: '邮箱',
      minWidth:'180'
    }
  ]
  const tableData: Ref<any> = ref([])

  const onAddStation = () => {
    dialogTitle.value = '添加用户'
    currentUser.value = {}
    showAddDialog.value = true
  }

  const handleCurrentChange = (page: number) => {
    queryForm.value.page = page;
    getDatas()
  }

  const getDatas = () => {
    getUserInfoPage(queryForm.value)
      .then(resp => {
        if (resp.code == 200) {
          let records = resp.data.records;
          records.forEach(data => {
            data.emailLoading = false
            data.emailEnabled = false;
            data.mobileEnabled = false;
            data.mobileEnabled = false;
          })
          tableData.value = records
          total.value = resp.data.total
        } else {
          tableData.value = []
        }
      })
  }

  const beforeChange = function (item: any, type: string) {
    item[type + 'Loading'] = true;
    return new Promise((_, reject) => {
      setTimeout(() => {
        item[type + 'Loading'] = false;
        item[type + 'Enabled'] = false
        ElMessage.error('Switch failed')
        return reject(new Error('Error'))
      }, 1000)
    })
  }

  const edit = (index: number, row: any) => {
    currentUser.value = row;
    dialogTitle.value = '修改用户信息'
    showAddDialog.value = true
  }

  const remove = (index: number, row: any) => {
    removeUser({id: row.userId}).then(() => {
      getDatas()
    })
  }

  onMounted(() => {
    getDatas()
  })
</script>

<style scoped>
  .site-manage {
    text-align: left;
  }
</style>
